<template>
  <div class="songslist">
    <!-- 歌单详细信息 -->
    <div class="top">
      <div class="left">
        <img :src="songslist.coverImgUrl" />
      </div>
      <div class="right">
        <div class="title">
          <div class="title_h">
            <el-tag type="danger" effect="plain">歌单</el-tag>
            <h2>{{ songslist.name }}</h2>
          </div>
          <div class="nums">
            <div class="left_num">
              <span>歌曲数</span>
              <span>{{ songslist.trackCount }}</span>
            </div>
            <div class="play_num">
              <span>播放数</span>
              <span>{{ songslist.playCount >10000 ? (songslist.playCount / 10000).toFixed(0) + '万' : songslist.playCount }}</span>
            </div>
          </div>
        </div>
        <div class="author">
          <a @click="collectorInfo(creators.userId)">
            <img :src="creators.avatarUrl" />
            <span>{{ creators.nickname }}</span>
          </a>
          <span>{{ songslist.createTime | dataFormat }} 创建</span>
        </div>
        <div class="btn">
          <el-button-group>
            <el-button size="mini" type="primary" class="iconfont icon-playcircle" @click="playAll"> 播放全部</el-button>
            <el-button type="primary" size="mini" class="iconfont icon-add"></el-button>
          </el-button-group>
          <el-button size="mini" class="iconfont icon-folder-add"> 收藏({{ songslist.subscribedCount }})</el-button>
          <el-button size="mini" class="iconfont icon-share"> 分享({{ songslist.shareCount }})</el-button>
          <el-button size="mini" class="iconfont icon-download"> 下载全部</el-button>
        </div>
        <div class="tag">
          <span>标签：</span>
          <a v-for="(item, index) in songslist.tags" :key="index">
            {{ index + 1 === songslist.tags.length ? item : item + ' / ' }}
          </a>
        </div>
        <div class="intro">
          <span>简介：</span>
          <span>{{ (songslist.description + '').substr(0, 200) + '...' }}</span>
        </div>
      </div>
    </div>
    <div class="songsTable">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="歌曲列表" name="first">
          <SongList :number="count"></SongList>
        </el-tab-pane>
        <el-tab-pane :label="getCommentNum" name="second">
          <SongComment></SongComment>
        </el-tab-pane>
        <el-tab-pane label="收藏者" name="third">
          <Collector></Collector>
        </el-tab-pane>
      </el-tabs>
      <div class="songs_search">
        <el-input placeholder="搜索歌单音乐" suffix-icon="el-icon-search" v-model="inputValue" size="mini"></el-input>
      </div>
    </div>
  </div>
</template>

<script>
import SongList from './SongList.vue'
import SongComment from './SongComment.vue'
import Collector from './Collector.vue'
import { getSongListInfo } from '../../../network/playlist.js'
export default {
  name: 'songslist',
  components: {
    SongList,
    SongComment,
    Collector
  },
  data () {
    return {
      ids: [],
      songsId: '',
      songslist: {},
      creators: {},
      count: 0,
      activeName: 'first',
      inputValue: ''
    }
  },
  methods: {
    // 全部播放
    playAll () {
      // console.log(id)
      // console.log(this.ids)
      this.$store.commit('musicListIds', this.ids)
    },
    // 获取歌单数据
    getSongListInfo (songsId) {
      getSongListInfo(songsId).then(res => {
        if (res.data.code !== 200) return this.$message.error('获取歌曲列表失败！')
        this.songslist = res.data.playlist
        this.creators = res.data.playlist.creator
        // 遍历数组把得到歌曲id放到一个数据里面
        this.songslist.trackIds.forEach(item => {
          this.ids = item.id
        })
        this.count = this.songslist.trackCount
        // console.log(res.data)
        // console.log(this.songslist)
      })
    },
    // 跳转用户信息列表
    collectorInfo (id) {
      // getUserDetailInfo(userId).then(res => {
      //   console.log(res.data)
      // })
      this.$router.push('/user_info/' + id)
    },
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  },
  created () {
    // 获取路由地址
    this.songsId = parseInt(this.$route.params.id)
    // console.log(this.songsId)
    this.getSongListInfo(this.songsId)
  },
  watch: {
    // 利用watch方法检测路由变化：
    $route: function (to, from) {
      // 拿到目标参数 to.params.id 去再次请求数据接口
      // console.log(to.params.id)
      this.id = parseInt(to.params.id)
      this.getSongListInfo(this.id)
    }
  },
  mounted () {
    // console.log("进入");
    // 进入添加
    document.addEventListener('scroll', this.handleScroll, true)
  },
  beforeDestroy () {
    // console.log("离开了");
    // 离开清除 不然耗性能
    document.removeEventListener('scroll', this.handleScroll, true)
  },
  computed: {
    // 获取评论数
    getCommentNum () {
      return `评论(${this.songslist.commentCount})`
    }
  }
}
</script>

<style lang="less" scoped>
  .songslist {
    width: 82%;
    overflow: auto;
    .top {
      width: 93%;
      margin: 30px auto;
      display: flex;
      justify-content: flex-start;
      .left {
        width: 20%;
        img {
          width: 100%;
        }
      }
      .right {
        // background-color: #0077AA;
        width: 75%;
        margin-left: 30px;
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          display: flex;
          justify-content: space-between;
          .title_h {
            display: flex;
            justify-content: space-between;
            // align-items: center;
            h2 {
              margin-left: 10px;
            }
          }
          .nums {
            color: #999999;
            display: flex;
            justify-content: flex-start;
            .left_num, .play_num {
              display: flex;
              flex-direction: column;
              margin-left: 10px;
              span {
                display: flex;
                justify-content: flex-end;
              }
            }
            .left_num {
              border-right: 2px solid #e1e1e2;
              padding-right: 10px;
            }
          }
        }
        .author {
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          a {
            display: flex;
            align-items: center;
            margin-right: 20px;
            cursor: pointer;
            img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
        }
        .btn {
          display: flex;
          flex-direction: row;
          .el-button-group {
            margin-right: 10px;
          }
        }
        .tag {
          font-size: 15px;
          a {
            color: #5d73cc;
          }
        }
        .intro {
          font-size: 15px;
        }
      }
    }
    .songsTable {
      position: relative;
      width: 95%;
      margin: 15px auto;
      .songs_search {
        width: 20%;
        position: absolute;
        top: 0;
        right: 0;
      }
      .el-tabs {
        margin-top: 10px;
      }
    }
  }
</style>

<style>
  .songs_search .el-input__inner {
    height: 30px;
    border-radius: 15px;
    letter-spacing: 2px;
    font-size: 13px;
  }
  .el-icon-search {
    color: #e1e1e2;
  }
</style>
